<style>
textarea
{
  width:100%;
}
</style>
<template>
  <div class=" col-md-12 col-lg-12 ">
    <div class="form-group" v-show="paper.f_defects && paper.f_defects.length>0" :class="paper.style__">
      <label class="col-sm-4 form-group">维修人：</label>
      <div class="col-sm-8 form-group">
        <v-select :value.sync="f_mechanics" :options='mechanics' placeholder='请选择维修人'
          close-on-select clear-button></v-select>
      </div>
    </div>
    <table class="table table-striped">
      <tbody>
        <tr v-show="role == 'repair'">
          <td>用户电话：</td>
          <td colspan="2">{{paper.f_user_phone2 ? paper.f_user_phone2 : paper.f_user_phone }}&nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-earphone" @click='makeAPhoneCall(paper.f_user_phone)'></span></td>
        </tr>
      </tbody>
      <tbody v-for="row in paper.f_defects">
        <tr :class="paper.style__">
          <td>隐患级别</td><td>{{row.f_defect_level}}</td>
        </tr>
        <tr :class="paper.style__">
          <td>隐患</td><td>{{row.f_defect}}</td>
        </tr>
        <tr :class="paper.style__">
          <td>部位</td><td>{{row.f_device_type}}</td>
        </tr>
        <tr :class="paper.style_view_" v-show="role != 'inspect'">
          <td>整改结果</td>
          <td>
            <radio-group :value.sync="row.f_ratification" type="success" buttons="false">
              <radio value="已处理">已处理</radio>
              <radio value="未处理">未处理</radio>
            </radio-group>
          </td>
        </tr>
        <tr v-show="role != 'inspect'">
          <td>整改前照片</td><td><img  :class="paper.style_view_" :src="row.f_defect_path" alt="整改前照片" width="150" height="200">
          &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-picture" @click="viewPic(row.f_defect_path)"></span>
          </td>
        </tr>
        <tr v-show="role != 'inspect'">
          <td>整改后照片</td>
          <td>
            <img :class="paper.style_view_" @click="takePic($index, 'f_ratified_path', row.f_defect + '整改后照片')"  :src="row.f_ratified_path" alt="{{row.f_defect}}整改后照片" width="150" height="200">
            &nbsp;&nbsp;&nbsp;&nbsp;<span :class="paper.style_view_" class="glyphicon glyphicon-trash" @click="delfile($index, 'f_ratified_path', row.f_ratified_path)"></span>
            &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-picture" @click="viewPic(row.f_ratified_path)"></span>
          </td>
        </tr>
        <tr :class="paper.style_view_" v-show="role != 'inspect'">
          <td>备注</td><td><textarea v-model="row.f_remark" rows="2"></textarea></td>
        </tr>
      </tbody>
    </table>
    <div style="height:50px;"></div>
  </div>
</template>

<script>
import Vue from 'vue'
import * as Util from '../Util'

export default {
  title: '隐患汇总',
  data() {
    return {
      paper: {},
      f_mechanics: '',
      mechanics: Vue.mechanics,
      role: ''
    }
  },
  ready() {
    this.$set('paper', this.$parent.$parent.data)
    this.$set('role', this.$parent.$parent.role)
    this.$parent.$parent.collectDefects()
    this.paper.f_defects.sort(this.comp)
    if(!this.paper.f_repairman) {
        this.$set('paper.f_repairman', null)
    } else {
      this.f_mechanics = [this.paper.f_repairman]
      console.log('还原的维修人：' + this.f_mechanics)
    }
    this.$watch('f_mechanics', function (val) {
        this.paper.f_repairman = val[0]
        console.log(JSON.stringify(val))
    })
    this.paper.f_defects.forEach((row) => {
      if(!row.f_ratified_path) {
        Vue.set(row, 'f_ratified_path', Vue.nopic)
        Vue.set(row, 'f_ratification', '未处理')
      }
    })
  },
  methods: {
    cameraCallBack(idx, prop, fileName) {
      console.log(prop + ',' + fileName)
      HostApp.__this__.$set('paper.f_defects[' + idx + '].' + prop, fileName + '?' + Math.random())
      //Vue.set(HostApp.__this__.paper.f_defects[idx].prop, fileName + '?' + Math.random())
      console.log(HostApp.__this__.paper.f_defects[idx].prop)
      HostApp.__callback__ = null
      HostApp.__this__ = null
    },
    takePic(idx, prop, title) {
      HostApp.__callback__ = this.cameraCallBack
      HostApp.__this__ = this
      let fileName
      if(!this.paper.f_defects[idx] || !this.paper.f_defects[idx].prop || this.paper.f_defects[idx].prop.includes("nopic.png")) {
        fileName = Util.guid() +'-defects-' + idx + '-' + prop + '.jpg'
      } else {
        fileName = Util.getFileName(this.paper.f_defects[idx].prop)
      }
      HostApp._open_a_page({type: 'boomerang',
        page: 'com.aofeng.hybrid.android.peripheral.CameraActivity',
        param: {file: fileName, requestCode: 111, callback:'javascript:HostApp.__callback__(' + idx + ',"' + prop +'", "%s");', watermark: title + '\t时间：'+ Util.toStandardTimeString() + '\t' + Vue.user.name}
      })
    },
    delfile(idx, prop, fileName) {
      if(fileName == Vue.nopic)
        return
      else {
        HostApp.delfile(fileName)
        Vue.set(this.paper.f_defects[idx], prop, Vue.nopic)
      }
    },
    comp(a, b) {
      let a1 = window.parseInt(a.f_defect_level.substr(0, 1), 16) * 64 + window.parseInt(a.f_defect_level.substr(1), 10)
      let b1 = window.parseInt(b.f_defect_level.substr(0, 1), 16) * 64 + window.parseInt(b.f_defect_level.substr(1), 10)
      return a1 - b1
    },
    makeAPhoneCall(phoneNumber) {
      HostApp.makeAPhoneCall(phoneNumber)
    },
    viewPic(fileName) {
      console.log(fileName)
      if(this.$parent.$parent.role == 'view') {
        if(!fileName.endsWith('nopic.png')) {
          this.$parent.$parent.pic_to_be_viewed = fileName
          this.$parent.$parent.showModal = true
      }
      } else {
        this.$parent.$parent.viewPic(fileName)
      }
    }
  }
}
</script>
